var drawTable;
(function () {
    //一、加上svg
    //单元格的宽高
    const CELL_WIDTH = 40;
    const CELL_HEIGHT = 60;
    //偏移值
    const OFFSET_X = 100;
    const OFFSET_Y = 10;

   d3.select("#svg_content") //选择文档中的body元素
        .append("svg");
    //绘制表格和任务区
    drawTable = function (tasks) {
        
        //当月日期
        let dates_curmonth = getDatesByMonth();

        let num_date = dates_curmonth.length;
        let num_task = tasks.data.length;
        //表格的尺寸
        let width = CELL_WIDTH * num_date; //画布的宽度
        let height = CELL_HEIGHT * num_task; //画布的高度

        //坐标原点
        let originX = 20;
        let originY = 20;

        width += OFFSET_X
        height += OFFSET_Y

        let x = originX + OFFSET_X;
        let y = originY - OFFSET_Y;

        let endX = originX + width;
        let endY = y + height;

        var svg =  d3.select("#svg_content svg")
        .attr("width", endX + 20) //设定宽度
        .attr("height", endY + 20); //设定高度
        //y轴
        let xLine = d3.scale.linear().domain([0, num_date]);
        let xdata = xLine.ticks(num_date);
        var xLineNodes = svg.selectAll('line.xline')
            .data(xdata);
        xLineNodes.enter()
            .append('line')
            .attr('class', 'xline')
            .attr('x1', function (i) {
                return i * CELL_WIDTH + 0.5 + x;
            })
            .attr('y1', y)
            .attr('x2', function (i) {
                return i * CELL_WIDTH + 0.5 + x;
            })
            .attr('y2', endY);
        xLineNodes.exit().remove();

        var xTextNodes = svg.selectAll('text.xtext')
            .data(dates_curmonth);
        xTextNodes.enter()
            .append('text')
            .attr('class', 'xtext')
            .attr('x', function (d, i) {
                return i * CELL_WIDTH + 0.5 + x + 5;
            })
            .attr('y', endY + 5)
            .text(d => {
                return d.substr(5, 11)
            })
            .attr("font-size", "10px")
            .attr("fill", "gray");
        xTextNodes.exit().remove();

        //x轴
        var yLine = d3.scale.linear().domain([0, num_task]);
        var ydata = yLine.ticks(num_task);
        var yLineNodes = svg.selectAll('line.yline')
            .data(ydata);
        yLineNodes.enter()
            .append('line')
            .attr('class', 'yline')
            .attr('x1', originX)
            .attr('y1', function (i) {
                return i * CELL_HEIGHT + 0.5 + y;
            })
            .attr('x2', endX)
            .attr('y2', function (i) {
                return i * CELL_HEIGHT + 0.5 + y;
            });
        yLineNodes.exit().remove();

        //绘制Y轴文本
        var yTextNodes = svg.selectAll('text.ytext')
            .data(tasks.data);
        yTextNodes.enter()
            .append('text')
            .attr('class', 'ytext')
            .attr('x', originX)
            .attr('y', function (d, i) {
                return i * CELL_HEIGHT + 0.5 + y + OFFSET_Y + CELL_HEIGHT / 3;
            })
            .text(i => i.name)
            .attr("font-size", "10px")
            .attr("fill", "gray");
        yTextNodes.exit().remove();

        // 绘制进度条
        var ydata = yLine.ticks(num_task);
        var yProcessNodes = svg.selectAll('rect.totalprocess')
            .data(tasks.data);
        yProcessNodes.enter()
            .append('rect')
            .attr('class', 'totalprocess')
            .attr("x", (d, i) => {
                return (dates_curmonth.indexOf(d.startdate) + 1) * CELL_WIDTH + OFFSET_X + originX
            })
            .attr("y", function (d, i) {
                return i * 60 + originY;

            })
            .attr("width", function (d) {
                return (dates_curmonth.indexOf(d.enddate) - dates_curmonth.indexOf(d.startdate)) * CELL_WIDTH
            })
            .attr("height", 23)
            .attr("fill", "lightgray");

        // 绘制当前进度条
        var ydata = yLine.ticks(num_task);
        var yProcessNodes = svg.selectAll('rect.process')
            .data(tasks.data);
        yProcessNodes.enter()
            .append('rect')
            .attr('class', 'process')
            .attr("x", (d, i) => {
                return (dates_curmonth.indexOf(d.startdate) + 1) * CELL_WIDTH + OFFSET_X + originX
            })
            .attr("y", function (d, i) {
                return i * 60 + originY;

            })
            .attr("height", 23)
            .attr("fill", "#48B508")
            .attr("width", 0)
            .transition()
            .duration(500)
            .attr("width", function (d) {
                return (dates_curmonth.indexOf(d.enddate) - dates_curmonth.indexOf(d.startdate)) * CELL_WIDTH * d.current / 100
            });

    }

    function getDatesByMonth(date) {
        date = date ? new Date(date) : new Date();

        var month = date.getMonth(),
            year = date.getFullYear();
        var edate = new Date(year, month + 1, 0);
        var eday = edate.getDate();
        month++
        return d3.range(1, eday + 1).map((day) => `${year}-${(month<10?'0':'')+month}-${(day<10?'0':'')+day}`)
    }

}())